<!--<SendSmsCode ref="smsCodeForm" @validatePhone="回调检验方法"/> -->
<template>
  <el-form
      ref="smsForm"
      :rules="smsRules"
      :model="smsForm"
      :label-width="lableWidth"
      status-icon
  >
    <el-form-item prop="phone" :label="phoneLabel">
      <el-input
          v-model="smsForm.phone"
          auto-complete="off"
          placeholder="请输入手机号码"
      >
        <template #prefix>
          <i class="icon-shouji2"></i>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="code" :label="codeLabel" v-if="codeShow">
      <el-input
          v-model="smsForm.code"
          auto-complete="off"
          placeholder="请输入验证码"
      >
        <template #prefix>
          <i class="icon-yanzhengma"></i>
        </template>
        <template #append>
          <span :class="[{display:msgKey}]" class="msg-text" @click="handleSend">
           {{ msgText }}
          </span>
        </template>
      </el-input>
    </el-form-item>
  </el-form>
</template>

<script>
import {sendSmsCode} from "@/api/login";
import {validatenull} from "@/util/validate.js";

const MSGINIT = "发送验证码",
    MSGSCUCCESS = "${time}秒后重发",
    MSGTIME = 60;

export default {
  name: "SendSmsCode",
  props: {
    phoneLabel: {
      type: String
    },
    exist:{
      type: Boolean,
      default: false
    },
    codeLabel: {
      type: String
    },
    codeShow: {
      type: Boolean,
      default: true
    },
    lableWidth: {
      type: String
    },
    modelValue: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch: {
    smsForm: {
      handler(val) {
        this.$emit('"update:modelValue"', val)
      },
      deep: true,
      immediate: true
    },
    modelValue: {
      handler(val) {
        this.smsForm = val
      },
      deep: true,
      immediate: true
    },
  },
  data() {
    const validatePhone = (rule, value, callback) => {
      this.$emit('validatePhone', rule, value, callback)
    };
    const validateCode = (rule, value, callback) => {
      if (validatenull(value) || value.length !== 6) {
        callback(new Error("请输入6位数的验证码"));
      } else {
        callback();
      }
    };
    return {
      msgText: MSGINIT,
      msgTime: MSGTIME,
      msgKey: false,
      smsForm: {
        phone: "",
        code: "",
      },
      smsRules: {
        phone: [{required: true, trigger: "blur", validator: validatePhone}],
        code: [{required: true, trigger: "blur", validator: validateCode}],
      },
    };
  },
  methods: {
    validate(callback) {
      this.$refs.smsForm.validate((valid) => {
        callback(valid);
      });
    },
    handleSend() {
      // 判断是否可以发送（时间限制）
      if (this.msgKey) return;
      // 发送验证码
      this.$refs.smsForm.validateField("phone", (valid) => {
        if (valid) {
          this.smsForm.exist = this.exist
          sendSmsCode(this.smsForm).then((response) => {
            if (response.data.data) {
              this.$message.success("验证码发送成功");
              this.$emit('smsForm', this.smsForm)
              this.timeCacl();
            } else {
              this.$message.error(response.data.msg);
            }
          });
        }
      });
    },
    timeCacl() {
      // 计时避免重复发送
      this.msgText = MSGSCUCCESS.replace("${time}", this.msgTime);
      this.msgKey = true;
      const time = setInterval(() => {
        this.msgTime--;
        this.msgText = MSGSCUCCESS.replace("${time}", this.msgTime);
        if (this.msgTime === 0) {
          this.msgTime = MSGTIME;
          this.msgText = MSGINIT;
          this.msgKey = false;
          clearInterval(time);
        }
      }, 1000);
    },
  },
};
</script>

<style>
.msg-text {
  display: block;
  width: 120px;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}

.msg-text.display {
  color: #ccc;
}
</style>
